<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 本地 -->
    <script src="../js/jquery-1.10.1.min.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        li {
            list-style: none;
        }

        #tips {
            background-color: grey;
            line-height: 45px;
        }

        .list {
            padding: 10px 0;
            background-color: #f1f1f1;
            overflow: hidden;
        }

        .list li {
            height: 32px;
            line-height: 32px;
            border: 1px dashed #333;
        }

        .list .newLi {
            border-color: red;
        }

        .list .active {
            background-color: #6ff;
        }


        /* div[class]{} */
        /* div[class='wrap'] */
        /* div[class][title] {} */

        /* div:not([class]) {
            width: 100px;
        } */
    </style>

</head>

<body>
    <!-- <input hidden type="text"> -->
    <div class="wrap">
        <h3 id="tips">jquery</h3>
        <div class="list">
            <li class="first" title="hei">01</li>
            <li>02</li>
            <li class="mid">03</li>
            <li>04</li>
            <li>05</li>
            <li class="last"><span>06</span></li>
        </div>
    </div>
</body>
<script>


    // each()

    // map()  遍历jquery对象(伪数组)  根据回调函数的返回值 生成一个新的jquery对象(伪数组)
    // 通过get()  转真数组

    // var $list = $(".list li").map(function (index, ele) {
    //     // console.log(index, ele, this);
    //     return $(this).text();
    // }).get();
    // console.log($list);

    // filter(selector|DOM|DOM集合|jquery对象|callbacks)   把满足条件的元素筛选出来 
    // 1. selector  字符串的选择器
    // $(".list li").filter(".first").css({ background: "red" })

    // 2. 原生dom元素  和  dom元素的集合
    // var first = document.querySelector(".first");
    // $(".list li").filter(first).css({ background: "red" });

    // var liList = document.querySelectorAll(".first,.last");
    // $(".list li").filter(liList).css({ background: "red" });

    // 3. 接收一个jquery对象 
    // $(".list li").filter($(".first")).css({ background: "red" });

    // 4. 接收回调函数   回调函数返回一个条件  把满足条件的元素筛选出来  放到jquery对象(集合)
    // $(".list li").filter(function (index, ele) {
    //     // return $(this).hasClass("first");    //first
    //     // return $(this).prop("className");

    //     return index > 0 && index < $(".list li").length - 1

    // }).css({ background: "red" });


    // not(selector|DOM|DOM集合|jquery对象|callbacks)   从集合中排除满足条件的元素 => 不满足条件的元素     filter的取反
    // 1. selector  字符串的选择器
    // $(".list li").not(".first").css({ background: "red" })

    // 2. 原生dom元素  和  dom元素的集合
    // var first = document.querySelector(".first");
    // $(".list li").not(first).css({ background: "red" });

    // var liList = document.querySelectorAll(".first,.last");
    // $(".list li").not(liList).css({ background: "red" });

    // 3. 接收一个jquery对象 
    // $(".list li").not($(".first")).css({ background: "red" });

    // 4. 接收回调函数   回调函数返回一个条件  把满足条件的元素筛选出来  放到jquery对象(集合)
    // $(".list li").not(function (index, ele) {
    //     // return $(this).hasClass("first");    //first
    //     // return $(this).prop("className");   // 含有class

    //     return index > 0 && index < $(".list li").length - 1;

    // }).css({ background: "red" });




    // is(selector|DOM|DOM集合|jquery对象|callbacks) 根据选择器、DOM元素或 jQuery 对象来检测匹配元素集合，如果其中至少有一个元素符合这个给定的表达式就返回true。
    // 单个元素  精确匹配
    // 多个元素  有一个含有则返回true

    // 1. selector  字符串的选择器
    // 单个元素  精确匹配
    // console.log($(".list .first").is(".first"));
    // console.log($(".list .first").is("li"));
    // console.log($(".list .first").parent().is(".list"));

    // 多个元素  有一个含有则返回true
    // console.log($(".list li").is(".first"));

    // 2. 原生dom元素  和  dom元素的集合
    // var first = document.querySelector(".first");
    // console.log($(".list li").is(first));

    // var liList = document.querySelectorAll(".first,.last");
    // console.log($(".list li").is(liList));

    // 3. 接收一个jquery对象 
    // console.log($(".list li").is($(".first")));

    // 4. 接收回调函数   回调函数返回一个条件  把满足条件的元素筛选出来  放到jquery对象(集合)
    var flag = $(".list li").is(function (index, ele) {
        return $(this).prop("title");

    })
    console.log(flag);








</script>


</html>